<!--
 * @Description: 
 * @Author: Devin
 * @Date: 2021-11-05 15:14:13
 * @LastEditTime: 2022-05-18 15:39:50
 * @LastEditors: Devin
 * @Reference: 
-->
<template>
  <div class="components cc-icon">
    <el-card id="图标按钮">
      <template #header>
        <div class="el-card-header">图标按钮</div>
      </template>
      <CcIconButton icon="cc-add" ></CcIconButton>
      <CcIconButton icon="cc-browse" disabled title="查看"></CcIconButton>
      <Code></Code>
    </el-card>
    <el-card id="多样title">
      <template #header>
        <div class="el-card-header">多样title</div>
        <div class="el-card-header-tip">内置了<code>tooltip</code>,使<code>title</code>更多样化,及时在禁用状态下也可以显示</div>
      </template>
      <CcIconButton icon="cc-add" title="原生title"></CcIconButton>
      <CcIconButton icon="cc-browse" showTip title="使用toolTip"></CcIconButton>
      <CcIconButton icon="cc-ashbin" disabled showTip title="删除"></CcIconButton>
      <Code></Code>
    </el-card>
    <iframe src="demo_index.html" frameborder="0" height="100%" width="100%"></iframe>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import CcIconButton from '@/components/packages/cc-icon-button/src/main.vue';
export default defineComponent({
  components: { CcIconButton },
  setup() {
    return {};
  }
});
</script>

<style scoped lang="scss">
.cc-icon {
  height: 100%;
  width: 100%;
  .demo {
    height: 30px;
  }
}
</style>
